<template>
  <view class="content">
    <view class="uni-list">
      <view class="uni-list-cell">
        <view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(item, index) in news"
          :key="index" @click="openinfo" :data-newsid="item.post_id">
          <view class="uni-media-list">
            <image class="uni-media-list-logo" :src="item.author_avatar"></image>
            <view class="uni-media-list-body">
              <view class="uni-media-list-text-top">{{item.title}}</view>
              <view class="uni-media-list-text-bottom uni-ellipsis">{{item.created_at}}</view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
	export default {
		data() {
			return {
				// title: 'Hello'
                news:[]
			}
		},
	onLoad: function() {
	  uni.showLoading({
	    title: "加载中...."
	  })
	  uni.request({
	    url: 'https://unidemo.dcloud.net.cn/api/news',
	    method: 'GET',
	    data: {},
	    success: res => {
	      this.news = res.data;
	      uni.hideLoading();
	    },
	    fail: () => {},
	    complete: () => {}
	  });
	},
	methods: {
	  openinfo(e) {
	    console.log(e);
	    var newsid = e.currentTarget.dataset.newsid;
	    uni.navigateTo({
	      url: '../detail/detail?newsid=' + newsid
	    });
	  }
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
	<style>
	    .content {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		} 
		.uni-media-list-body{
			height: auto;
		}
		.uni-media-list-text-top{
			line-height:1.6em;
		}
	</style>

</style>
